<template>
  <div>
    <base-dialog :close-on-click-modal="false" title="更改设备基本信息" :visible.sync="dialog.visible" append-to-body width="50%" @updateData="submitForm" @open="onDialogOpen">
      <el-form ref="form" :model="device" label-width="120px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="设备名称" prop="nodeName" :rules="{ required: true, message: '设备名称不能为空', trigger: 'blur' }">
              <el-input v-model="device.nodeName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设备状态" prop="status" :rules="{ required: true, message: '设备状态不能为空', trigger: 'change' }">
              <el-select v-model="device.status" placeholder="请选择设备状态">
                <el-option v-for="item in dict.type.common_status" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="厂商" prop="manufacturerId">
              <el-input v-model="device.manufacturerId" placeholder="请输入厂商" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设备描述" prop="description">
              <el-input v-model="device.description" placeholder="请输入设备描述" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="所属产品" prop="model" :rules="{ required: true, message: '产品标识不能为空', trigger: 'change' }">
              <el-select v-model="device.model" :disabled="set ? true : false" placeholder="请选择所属产品">
                <el-option v-for="item in productList" :key="item.model" :disabled="item.status === 0" :label="item.productName" :value="item.model" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </base-dialog>
  </div>
</template>

<script>
import { getAllProduct as selectProductList } from '@/api/cms/winglinks/product'
import { getDeviceInfoById, updateDeviceInfo } from '@/api/cms/winglinks/deviceinfo'
export default {
  name: 'EditDevice',
  dicts: ['common_status', 'device_type', 'connect_status'],
  props: {
    dialog: {
      type: Object,
      default() {
        return {
        }
      }
    }
  },
  data() {
    return {
      set: true,
      // 设备信息
      device: {
        deviceType: null,
        nodeName: null,
        nodeId: null,
        connectStatus: null,
        status: null,
        productIdentification: null,
        deviceId: null,
        product: {
          model: null,
          productName: null
        }
      },
      // 产品列表
      productList: []
    }
  },
  mounted() {
    console.log('refresh', this.dialog.deviceId)
    this.selectProductList()
    this.getDeviceDetail()
  },
  activated() {
    this.selectProductList()
    this.getDeviceDetail()
  },
  created() {
    this.selectProductList()
    this.getDeviceDetail()
  },
  methods: {
    onDialogOpen() {
      this.getDeviceDetail()
    },
    // 获取产品列表
    selectProductList() {
      selectProductList({}).then(response => {
        this.productList = response.data
      })
    },
    // 获取设备详情
    getDeviceDetail() {
      if (this.dialog.deviceId) {
        getDeviceInfoById(this.dialog.deviceId).then(res => {
          this.device = res.data
        })
      }
    },
    // 提交信息
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.device.id != null) {
            updateDeviceInfo(this.device).then((response) => {
              this.notifiySuccess('修改成功')
              this.dialog.visible = false
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .map{
    height: 400px;
    width: 100%;
    padding: 10px 30px;
  }
</style>
